<template>
    <div class="historyhot">
        <!-- 历史记录列表 -->
        <div class="his-hot" v-if="isShowHistory">
            <div class="his-hot-1">
                <h4>历史记录</h4>
                <van-icon name="delete" @click="clearFn" />
            </div>
            <div class="his-hot-2">
                <van-tag
                    v-for="item in historyKeywordList"
                    :key="item.id"
                    plain
                    type="default"
                    @click="gotoSearch(item)">{{ item }}
                </van-tag>
            </div>
        </div>
        <!-- 热门搜索模块 -->
        <div class="his-hot">
            <div class="his-hot-1">
                <h4 class="text">热门搜索</h4>
            </div>
            <div class="his-hot-2">
                <van-tag
                    v-for="item in hotKeywordList"
                    :key="item.id"
                    plain
                    :type="item.is_hot ? 'danger' : 'default'"
                    @click="gotoSearch(item.keyword)">{{ item.keyword }}
                </van-tag>
            </div>
        </div>
    </div>
</template>

<script>
//引入删除历史记录
import { clearHistory } from "@/utils/http";
export default {
    name: "",
    props: ["historyKeywordList","hotKeywordList"],
    data() {
        return {
            isShowHistory: true, // 是否展示历史记录
        };
    },

    components: {},

    computed: {},

    created() {},

    mounted() {},

    methods: {
        clearFn(){
            // 清除历史记录
            clearHistory().then((res)=>{
                console.log(res);
                if(res.data.errno == 0){
                    // 提示删除成功
                    this.$toast.success("删除成功");
                    // 隐藏历史记录
                    this.isShowHistory = false;
                }
            })
        },
        gotoSearch(val){
            // console.log(val);
            this.$emit('gotoSearch',val);
        }
    },
};
</script>
<style lang='less' scoped>
.historyhot {
    height: 600px; 
    background-color: rgba(0,0,0,0.3);
    .his-hot {
        height: 50px;
        background-color: #fff;
        padding: 2%;
        .his-hot-1 {
            padding-top: 2%;
            display: flex;
            justify-content: space-between;
            h4{
                font-size: 16px;
            }
            .text{
                padding-bottom: 2%;
            }
        }
        .his-hot-2 {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            .van-tag {
                padding: 3px;
                margin: 0 2px;
            }
        }
    }
}
</style>